<template>
<div class="comment">

    <div class="comment-content">

        <h1 class="title">
            会员用户留言
        </h1>
        <div class="username-contianer">
            <span class="label">
                你的名字
            </span>
            <i-input size='small' class='username' v-model='username'></i-input>
        </div>
        <i-input class='text' :rows='6' placeholder='请输入留言' v-model='text' type='textarea'></i-input>
        <div class="remind">
            网络记录
            <div class="time">
                时间: {{createTime}}
            </div>
            <div>
                注意：确定留言前先检阅免责声明
            </div>
        </div>
        <div class="btns">

            <div class="btn enter" @click='submit'>
                留言
            </div>
            
            <div class="btn clear" @click='clear'>
                清除
            </div>
            
        </div>
        
    </div>

     <div class="soure">
            分享至：
            <div class="soure-content">

                <div class="soure-item" v-for='(item, index) of icons' :key='index' >
                    <a :href="item.path">
                        <div class="img-box">
                            <img :src="item.icon" alt="">
                        </div>
                    </a>
                </div>
                
            </div>
            
        </div>
    
</div>
</template>

<script lang='ts'>
import {Component, Vue, Prop} from 'vue-property-decorator';
import imgs from '@/imgs.json';
import fackbookIcon from '@/assets/fackbook.png';
import wxIcon from '@/assets/wx.png';
import whathsappIcon from '@/assets/whathsapp.png';
import tIcon from '@/assets/t.png';




@Component
export default class Topbar extends Vue{

    username:string = ''
    text: string = ''
    
    icons = [

        {
            path: '/',
            icon: fackbookIcon
        },
        {
            path: '/',
            icon: wxIcon
        },
        {
            path: '/',
            icon: whathsappIcon
        },
        {
            path: '/',
            icon: tIcon
        }
        
    ]
    
    submit(){
        alert(` ${this.username} ${this.text} `)
    }
    
    clear(){
        this.text = '';
    }
    
   get createTime(){
        let date = new Date();
        let y = date.getFullYear() + 1;
        let m = date.getMonth();
        let d = date.getDay();
        let H = date.getHours();
        let M = date.getMinutes();
        let S = date.getSeconds();

        const cover = (time:number) =>{
            return time <= 9 ? ('0' + time) : time;
        }
        
        return `${y}-${cover(m)}-${cover(d)} ${cover(H)}:${cover(M)}:${cover(S)} `
        
    }
    
}


</script>

<style scoped lang='less'>
.comment{
    margin-top: 30*@rem;
}
.comment-content{
    border: 1*@rem solid @mainColor;

    .title{
        padding: 10*@rem 20*@rem;
        display: block;
        font-weight: 800;
        font-size: @fontSizeLg;
    }
    
    .btns,
    .remind,
    .text{
        padding: 10*@rem 20*@rem;
    }

    .username-contianer{
        display: flex;
        justify-content: left;
        align-items: center;
        
        padding: 14*@rem 20*@rem 20*@rem;
        background: url('../../assets/topbar-bg.png') center no-repeat;
        background-size: 100% 100%;
        color: @fontColorLight;

        .label{
            display: inline-block;
            margin-right: 10*@rem;
        }

        .username{
            width: 200*@rem;
        }
        
    }

    .text{
        color: #008ed6;
        background: #e5f3fb;
    }

    .remind{
        font-size: @fontSizeXm;
        border-bottom: 1*@rem solid #eee; 
        &>div{
            display: inline-block;
            margin-left: 40*@rem;
        }
    }
    .time{
        border-left: 1*@rem solid #eee;
    }
    


    .btns{

    }

    .btn{
        display: inline-block;
        @h: 40*@rem;
        width: 100*@rem;
        height: @h;
        border-radius: 4*@rem;
        background: @mainColor;
        text-align: center;
        line-height: @h;
        color: @fontColorLight;
        cursor: default;
    }

    .btn + .btn{
        margin-left: 20*@rem;
    }

    .enter{
        background: url('../../assets/btn-bg.png') center no-repeat;
        background-size: auto 100%;
    }

}

.soure{
    display:flex;
    justify-content: left;
    align-items: center;

    padding-top: 30*@rem;
    font-size: 24*@rem;
    color: @mainColor;
}

@size: 42*@rem;
.soure-content{
    display: inline-block;
}

.soure-item{
    display: inline-block;
    margin-left: 30*@rem;
    width: @size;
    height: @size;
    
}

@media (max-width: 768px){

    .comment{
        padding: 0 10*@rem;
    }
    
}

</style>